<template>
  <el-table :data="tableData" stripe border style="width: 80%">
    <el-table-column prop="value" label="Value" width="180" />
    <el-table-column prop="link" label="Link" />
    <el-table-column prop="address" label="Address" />
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { useWebStore } from '../../stores/web'

const webStore = useWebStore()

const handleEdit = (index, row) => {
  console.log(111)
  webStore.preInfo4Mod(index, row)
}
const handleDelete = (index, row) => {
  console.log(index, row)
}

const tableData = [
  { value: 'vue', link: 'https://github.com/vuejs/vue', address: 'No. 189, Grove St, Los Angeles' },
  {
    value: 'element',
    link: 'https://github.com/ElemeFE/element',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    value: 'cooking',
    link: 'https://github.com/ElemeFE/cooking',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    value: 'mint-ui',
    link: 'https://github.com/ElemeFE/mint-ui',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    value: 'vuex',
    link: 'https://github.com/vuejs/vuex',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    value: 'vue-router',
    link: 'https://github.com/vuejs/vue-router',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    value: 'babel',
    link: 'https://github.com/babel/babel',
    address: 'No. 189, Grove St, Los Angeles'
  }
]
</script>
